'use strict';
import React, {Component, PropTypes} from 'react';
var reqwest = require("reqwest");
import API from '../../../../config/api';
import Properties from '../../../../config/properties';

import TcpPage from '../../../../components/tcp/Page.jsx';
import PageLoading from '../../components/pageLoading/PageLoading.jsx';
import {removeLoading} from '../../utils';

import './frontend.less';

class PageFront extends Component {
    constructor( props ) {
        super( props );
        this.state = {
            loading:true,
            deviceWidth:document.documentElement.clientWidth < 768 ? document.documentElement.clientWidth:411,
            deviceHeight: document.documentElement.clientHeight
        };
        let { hash } = this.props.params;
        this.hash = hash;
        this.pageInfo = null;
        removeLoading()
    }
    _updateDimensions() {
        this.setState({
            deviceWidth:document.documentElement.clientWidth < 768 ? document.documentElement.clientWidth:411,
            deviceHeight: document.documentElement.clientHeight
        });
    }
    componentWillUnmount() {
        window.removeEventListener("resize", this._updateDimensions.bind(this));
    }
    componentDidMount() {
        window.addEventListener("resize", this._updateDimensions.bind(this));
        reqwest({
            url: Properties.host+Properties.baseUrl+API.mobilePage,
            method: 'post',
            data:JSON.stringify({
                hash:this.hash
            }),
            timeout:15000,
            type: 'json',
            success: (response) => {
                if(typeof Tida !== "undefined"){
                    Tida.setTitle(response.title)
                }
                document.title = response.title;
                this.pageInfo = response;
                this.setState({
                    loading:false
                });
            }
        });
    }
    render() {
        if(this.state.loading || !this.pageInfo) return <PageLoading />;
        //console.log(this.pageInfo)
        return(
            <div style={{margin:"0 auto",width:this.state.deviceWidth}}>
                <TcpPage
                    pageInfo={this.pageInfo}
                    deviceWidth={this.state.deviceWidth} />
            </div>
        )
    }
}

export default PageFront;
